<template>
  <div class="index-list mt-10">
    <div class="top flex">
      <li class="air mr-10">
        <el-card class="">
          <template #header>
            <div>
              <span>空气湿度</span>
            </div>
          </template>
          <div class="chart" id="air"></div>
        </el-card>
      </li>
      <li class="sun">
        <el-card>
          <template #header>
            <div>
              <span>光照</span>
            </div>
          </template>
          <div class="chart" id="sun"></div>
        </el-card>
      </li>
    </div>
    <div class="under flex mt-5">
      <li class="qi mr-10">
        <el-card>
          <template #header>
            <div>
              <span>气压</span>
            </div>
          </template>
          <div class="chart" id="qi"></div>
        </el-card>
      </li>
      <li class="shi">
        <el-card>
          <template #header>
            <div>
              <span>土壤湿度</span>
            </div>
          </template>
          <div class="chart" id="shi"></div>
        </el-card>
      </li>
    </div>
  </div>
</template>

<script setup>
import { onMounted, inject, toRefs, defineProps } from "vue"; // 主要
import { ref } from "vue";
// const props = defineProps({
//   listChart: Object,
// });
let echarts = inject("echarts"); // 主要
// 空气湿度
const changeAir = () => {
  const chartBox = echarts.init(document.getElementById("air")); // 主要
  const option = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [820, 932, 501, 934, 1290, 430, 1320],
        type: "line",
        smooth: true,
      },
    ],
  };
  chartBox.setOption(option);
  // 根据页面大小自动响应图表大小
  window.addEventListener("resize", function () {
    chartBox.resize();
  });
};
const changeSun = () => {
  const chartBox = echarts.init(document.getElementById("sun")); // 主要
  const option = {
    xAxis: {
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {},
    series: [
      {
        type: "bar",
        data: [120, 200, 150, 80, 70, 110, 130],
      },
    ],
  };
  chartBox.setOption(option);
  // 根据页面大小自动响应图表大小
  window.addEventListener("resize", function () {
    chartBox.resize();
  });
};
//气压
const changeQi = () => {
  const chartBox = echarts.init(document.getElementById("qi")); // 主要
  const option = {
    legend: {
      top: "bottom",
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    series: [
      {
        name: "Nightingale Chart",
        type: "pie",
        radius: [20, 100],
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 8,
        },
        data: [
          { value: 40, name: "周一" },
          { value: 38, name: "周二" },
          { value: 32, name: "周三" },
          { value: 30, name: "周四" },
          { value: 28, name: "周五" },
          { value: 26, name: "周六" },
          { value: 22, name: "周日" }, 
        ],
      },
    ],
  };
  chartBox.setOption(option);
  // 根据页面大小自动响应图表大小
  window.addEventListener("resize", function () {
    chartBox.resize();
  });
};
//土壤湿度
const changeShi = () => {
  const chartBox = echarts.init(document.getElementById("shi")); // 主要
  const option = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [1000, 932, 901, 934, 1290, 1330, 1320],
        type: "line",
        smooth: true,
      },
    ],
  };
  chartBox.setOption(option);
  // 根据页面大小自动响应图表大小
  window.addEventListener("resize", function () {
    chartBox.resize();
  });
};

onMounted(() => {
  changeAir();
  changeSun();
  changeQi();
  changeShi();
});
</script>

<style>
</style>